import { StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text, Image, ChevronRightIcon } from 'native-base';
import React from 'react'
import { useNavigation } from '@react-navigation/native';

const Cell = (props) => {
  const navigation = useNavigation();
  const { leftIcon, leftText, rightText, link, borderBottom, style = {},
    onPress, children
  } = props
  const leftIconDefault = () => {
    if (!leftIcon) {
      return null
      // return require('../assets/mine2.png')
    }
    return {
      uri: leftIcon,
    }
  }
  const onClick = () => {
    onPress && onPress()
    if (typeof link === 'string') {
      console.log(props)
      navigation.navigate(link)
    } else if(typeof link === 'object') {
      navigation.navigate(link.name, link.params)
    }
  }
  return (
    <TouchableOpacity onPress={onClick}>
      <View style={[styles.cell, borderBottom && styles.borderBottom, style]}>
        <View style={styles.left}>
          {
            leftIcon && <Image style={styles.leftIcon} source={leftIconDefault()} alt="icon"></Image>
          }
          <Text>{leftText || '默认leftText'}</Text>
        </View>

        <View style={styles.right}>
          {
            rightText ? <Text style={styles.rightText}>{rightText}</Text> : 
            children
          }
          {
            (link || onPress) && <ChevronRightIcon />
          }
        </View>
      </View>
    </TouchableOpacity>
  )
}

export default Cell

const styles = StyleSheet.create({
  cell: {
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    overflow: 'hidden',
    paddingHorizontal: 20,
    paddingVertical: 15
  },
  borderBottom: {
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  left: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  leftIcon: {
    marginRight: 10,
    width: 40,
    height: 40,
  },
  right: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  rightText: {
    color: '#666'
  }
})